<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- {{ dateNumber }} -->
      <!-- 筛选 -->
      <el-card class="select-department">
        <div class="select-title">部门：</div>
        <el-checkbox-group v-model="checkedDepartment" @change="filterDepartment">
          <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.name" />
        </el-checkbox-group>

        <el-row class="attendances-status" type="flex">
          <div class="select-title">考勤状态:</div>
          <el-checkbox-group v-model="checkedStatus">
            <el-checkbox v-for="item in selectStatus" :key="item.id" :label="+item.id">
              {{ item.value }}
            </el-checkbox>
          </el-checkbox-group>
        </el-row>
      </el-card>
      <!-- 表格 -->
      <el-card>
        <el-table
          :data="pageList"
          border
          style="width: 100%"
        >
          <el-table-column type="index" width="50" label="序号" />

          <el-table-column
            prop="username"
            label="姓名"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
          />
          <el-table-column
            prop="mobile"
            label="手机"
          />
          <!-- v-for循环日期数组，这里不需要加prop，只需要遍历渲染日期数组，再将拿到日期数组的日期进行过滤即可 -->
          <el-table-column
            v-for="(item, index) in dateNumber"
            :key="index"
            :label="item"
          >
            <template #default="{row}">
              <!-- 如果有选中，那么就那选中的数组判断下哪些是包含的，再显示哪些 -->
              <span v-if="showAll || checkedStatus.includes(row.attendanceRecord[index].adtStatu)">
                <!-- 根据索引对应上每个对象的日期所对应的工作状态 -->
                {{ row.attendanceRecord[index].adtStatu | formatAttendance }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="tableData.length"
          :page-size="page.pagesize"
          :current-page="page.page"
          @current-change="changePage"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendanceEnum from '@/api/constant/attendance'
import { getDepartmentList } from '@/api/department'
export default {
  filters: {
    formatAttendance(oldVal) {
      const obj = attendanceEnum.holidayType.find(item => +item.id === oldVal)
      return obj ? obj.value : '未知'
    }
  },
  data() {
    return {
      // 选中的部门
      checkedDepartment: [],
      // 选中的考勤
      checkedStatus: [],
      // 表格数据
      tableData: [],
      // 拿一个数组存储表格数据不变的，为了筛选而使用的
      constantData: [],

      // 考勤状态
      selectStatus: attendanceEnum.holidayType,
      showAll: true,
      // 部门列表
      departmentList: [],
      // 翻页的配置
      page: {
        page: 1, // 当前页码
        pagesize: 5 // 页容量
      }
    }
  },
  computed: {
    // 表格的日期
    dateNumber() {
      // 这里只需要拿到考勤数据的第一条的日期，因为每个日期对象的日期都是一样的
      const list = this.tableData[0] ? this.tableData[0].attendanceRecord : []
      return list.map(item => {
        const month = item.day.toString().slice(4, 6)
        const currentMonth = month.startsWith('0') ? month.slice(1) : month
        const day = item.day.toString().slice(6)
        const currentDay = day.startsWith('0') ? day.slice(1) : day

        return `${currentMonth}/${currentDay}`
      })
    },
    // 根据翻页来控制显示条数
    pageList() {
      // 结束页是当前页码*条数
      const end = this.page.page * this.page.pagesize
      // 结束总条数- 第一页的
      const start = end - this.page.pagesize
      return this.tableData.slice(start, end)
    }

  },
  watch: {
    // 当没有选中也就是数组为空，就全部显示，否则就 不是
    // 具体代码看工作状态的插槽那里
    checkedStatus(val) {
      if (val.length === 0) {
        this.showAll = true
      } else {
        this.showAll = false
      }
    }
  },
  async created() {
    this.getAttendancesListMock()
    this.getDepartmentList()
  },
  methods: {
    // 考勤表格列表
    async getAttendancesListMock() {
      const { rows } = await getAttendancesListMock()
      this.tableData = [...rows]
      // 存给筛选使用的
      this.constantData = [...rows]
      console.log(this.tableData)
    },
    // 部门
    async getDepartmentList() {
      const { depts } = await getDepartmentList()
      // console.log(112, res)
      this.departmentList = depts
    },
    // 切换页码数据刷新，让新页码给当前页
    changePage(newPage) {
      // console.log(newPage)
      this.page.page = newPage
    },
    // 部门过滤
    filterDepartment(val) {
      console.log(val)
      if (val.length !== 0) {
        this.tableData = this.constantData.filter(item => val.includes(item.departmentName))
      // console.log(this.tableData)
      } else {
        this.tableData = this.constantData
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select-department {
  margin: 10px 0;
}
.attendances-status {
  margin-top: 30px;
  ::v-deep .el-checkbox__inner {
    border-radius: 50%;
  }
}
.select-title {
  font-weight: bold;
  padding-right: 10px;
}
</style>
